<template>
	<view>
		<view class="top">
			<view style="text-align: center; font-size: 35rpx; color: #fff">欢迎来到车联网服务平台商家端</view>
			<view style="height: 200rpx"></view>
			<view style="border-radius: 20px; background-color: #fff; padding: 150rpx 50rpx 0 50rpx">
				<image src="/static/yellowman.png" style="width: 300rpx; height: 200rpx; position: fixed; top: 150rpx; left: 240rpx"></image>
				<view style="font-weight: 600; margin: 0 10rpx; padding-left: 20rpx"><input type="text" v-model="phone" placeholder="手机号登陆" /></view>
				<view style="width: 100%; height: 1px; background-color: gray; margin: 20px 10px"></view>
				<view style="font-weight: 600; margin: 0 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center; height: 100rpx;" >
					<input type="text" v-model="code" placeholder="输入验证码" style="width: 60%" />
<button @click="getcodeimg()" style="width: 35%;height: 100%; font-size: 30rpx; display: flex;align-items: center;background-color: #4c8efe;color: white;"   v-if="showbutton">获取验证码</button>
<image style="width: 35%;height: 100%;" :src="'data:image/gif;base64,'+img" v-else></image>

				</view>
				<view style="width: 100%; height: 1px; background-color: gray; margin: 20px 10px"></view>
				<text style="color: #4c8efe; margin: 0 20px" @click="toRegister()">立即注册></text>
				<button :disabled="isdisable" style="background-color: #4c8efe; color: #e6e6e6; margin: 0 20px; margin-top: 50rpx; border-radius: 30px" @click="toIndex()">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
import request from '../../utils/request';
import { ref } from 'vue';
let showbutton=ref(true)
let isdisable=ref(false)
let img=ref('')
let code=ref('')
let phone=ref('')
function toRegister() {
	uni.navigateTo({
		url: '/pages/register/register'
	});
}
onLoad((option)=>{
	if(option.code!=401){
		if(uni.getStorageSync('token')){
			uni.redirectTo({
				url:'/pages/index/index'
			})
		}
	}
	
	// console.log(option);
	if(option.phone){
		phone.value=option.phone
	}
	
})
function getcodeimg(){
	showbutton.value=true
	request({
		url:'MerchantCode',
		method:'get',
		data:{
	phone:phone.value
		},
		success(res){
			console.log(res);		
			img.value=res.data.data.image
			showbutton.value=false
			
		},
		fail(err){
			console.log(err);
		}
	})
}
function toIndex() {
	if(phone.value!=''){
		isdisable.value=true
	request({
		url: 'auth/merchantlogin',
		method: 'post',
		data: { phone:phone.value,code:code.value },
		success(res) {
			console.log(res);
			if(res.data.data.token.access_token){
				uni.setStorageSync("token",res.data.data.token.access_token)
				uni.setStorageSync("userinfo",res.data.data.merchant)
				uni.redirectTo({
					url:'/pages/index/index'
				})
				isdisable.value=false
			}
		},
		fail(err) {
			console.log(err);
			isdisable.value=false
		}
	});
	
	}else{
		uni.showToast({
			title:'手机号不能为空',
			icon:'none'
		})
	}
}
</script>

<style>
@import '../../common/app.css';
</style>
